<template>
  <div>
    <h1>Header</h1>
    <!--跳转路由 二级路由  to可以时字符串 也可以是一个对象
    a标签跳转 -->
    <!-- <router-link :to="{ name: 'Music', params: { id: 1, name: '周杰伦' } }"
      >music1</router-link
    >
    <router-link :to="{ name: 'Music', params: { id: 2, name: '陈奕迅' } }"
      >music2</router-link
    >
    <router-link :to="{ name: 'Music', params: { id: 3 } }">music3</router-link> -->
    <!-- 使用query传参 -->
    <router-link :to="{ name: 'Music', query: { id: 4, name: '罗飞' } }"
      >music4</router-link
    >
    <router-link :to="{ name: 'Game', query: { id: 888, name: '游戏' } }"
      >games</router-link
    >
    <router-link :to="{ name: 'News' }">news</router-link>

    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "Header",
};
</script>

<style>
</style>